<template>
  <div class="app-container">
  <!-- 筛选区域 -->
<div class="filter-area">
  <!-- 第一行筛选条件 -->
  <div class="filter-row">
    <el-select v-model="Prefecture" placeholder="选择地市" class="filter-item">
      <el-option
        v-for="item in Prefectures"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      />
    </el-select>
    
    <el-select v-model="city" placeholder="选择区县" class="filter-item">
      <el-option
        v-for="item in citys"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      />
    </el-select>
    
    <el-input v-model="task" placeholder="缺陷类型" class="filter-item">
    </el-input>
    
    <el-select v-model="type" placeholder="通信塔类型" class="filter-item">
      <el-option
        v-for="item in towerTypeList"
        :key="item.towerType.id"
        :label="item.towerType.typeName"
        :value="item.towerType.id"
      />
    </el-select>
  </div>
  
  <!-- 第二行筛选条件 -->
  <div class="filter-row">
    <el-select v-model="Audit" placeholder="审核状态" class="filter-item">
      <el-option
        v-for="item in Audits"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      />
    </el-select>
    
    <el-input v-model="input" class="filter-item" placeholder="巡视任务名称" />
    
    <el-date-picker
      v-model="value2"
      type="datetimerange"
      start-placeholder="开始时间"
      end-placeholder="结束时间"
      class="filter-item date-picker"
    />
    
    <el-button 
  type="primary" 
  class="search-btn" 
  @click="filterUser"
  style="background-color: rgba(110, 78, 208, 0.1); border-color: #6f42c1; color: rgb(110, 78, 208);"
>
  <i class="el-icon-search"></i> 查询
</el-button>
  </div>
</div>

    <!-- 内容区域 -->
    <div class="content-area">
      <div class="grid">
        <div v-for="(item, index) in displayedData" :key="index" class="grid-item">
          <div class="card" @click="showItem(item)">
            <div class="card-header">
              <span class="task-name">{{ item?.inspectionTask?.taskName }}</span>
              <span class="task-time">{{ formatDate(item?.inspectionTask?.createTime) }}</span>
            </div>
            
            <div class="card-image">
              <div class="status-badge" :class="getStatusClass(item?.manualReview?.auditStatus)">
                {{ item?.manualReview?.auditStatus }}
              </div>
              <img :src="item?.inspectionTaskResultDetail?.primaryImageUrl" alt="巡检图片" />
            </div>
            
            <div class="card-details">
              <div class="detail-item">
                <span class="detail-label">通信塔部位：</span>
                <span>{{ item?.towerPosition?.positionName }}</span>
              </div>
              <div class="detail-item">
                <span class="detail-label">照片编号：</span>
                <span>{{ item?.inspectionTaskResultDetail?.pictureID }}</span>
              </div>
              <div class="detail-item">
                <span class="detail-label">缺陷等级：</span>
                <span :class="getDefectLevelClass(item?.manualReview?.defectLevel)">
                  {{ item?.manualReview?.defectLevel || '未评级' }}
                </span>
              </div>
            </div>
          </div>
        </div>
      </div>
      
      <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :total="total"
        layout="prev, pager, next, jumper"
        :background="true"
        class="pagination"
        @current-change="handleCurrentChange"
      />
    </div>

    <!-- 详情弹窗 -->
    <el-dialog 
      v-model="centerDialogVisible" 
      width="85%"
      top="5vh"
      class="detail-dialog"
      :close-on-click-modal="false"
>
  <!-- 弹窗头部 -->
  <div class="dialog-header">
    <div class="header-left">
      <h3 class="task-title">{{ openItemMessage?.inspectionTask?.taskName }}</h3>
      <div class="task-meta">
        <span class="meta-item">
          <i class="el-icon-time"></i>
          {{ formatDate(openItemMessage?.manualReview?.createTime) }}
        </span>
        <span class="meta-item" v-if="openItemMessage?.manualReview?.auditPerson">
          <i class="el-icon-user"></i>
          审核人：{{ openItemMessage?.manualReview?.auditPerson }}
        </span>
      </div>
    </div>
    <div class="header-right">
      <el-tag 
        :type="getResultTagType(openItemMessage?.manualReview?.resultCheck)"
        size="medium"
        effect="dark"
      >
        {{ openItemMessage?.manualReview?.resultCheck || '待审核' }}
      </el-tag>
      <el-tag
        :type="openItemMessage?.manualReview?.auditStatus === '已审核' ? 'success' : 'warning'"
        size="medium"
        class="status-tag"
      >
        {{ openItemMessage?.manualReview?.auditStatus }}
      </el-tag>
    </div>
  </div>

  <!-- 弹窗主体内容 -->
  <div class="dialog-body">
    <!-- 左侧图片区域 -->
    <div class="image-section">
      <div class="image-container">
        <el-image
          class="main-image"
          :src="openItemMessage?.inspectionTaskResultDetail?.primaryImageUrl"
          fit="contain"
          :preview-src-list="[openItemMessage?.inspectionTaskResultDetail?.primaryImageUrl]"
          @load="drawBoxes"
        >
          <template #error>
            <div class="image-error">
              <i class="el-icon-picture-outline"></i>
              <span>图片加载失败</span>
            </div>
          </template>
        </el-image>
        <canvas ref="canvasRef" class="bounding-box-canvas"></canvas>
      </div>
    </div>

    <!-- 右侧信息区域 -->
    <div class="info-section">
      <!-- 缺陷详情卡片 -->
      <el-card class="info-card" shadow="never">
        <div slot="header" class="card-header">
          <span class="header-title"><i class="el-icon-info"></i> 缺陷详情</span>
        </div>
        <div class="info-content">
          <div class="info-row">
            <span class="info-label">通信塔部位：</span>
            <span class="info-value">{{ openItemMessage?.towerPosition?.positionName || '未知' }}</span>
          </div>
          <div class="info-row">
            <span class="info-label">缺陷内容：</span>
            <span class="info-value "  :style="{ 'color': openItemMessage?.manualReview?.defectContent == '无缺陷' ? 'green': 'red' }"
  >{{ openItemMessage?.manualReview?.defectContent || '无描述' }}</span>
          </div>
          <div class="info-row">
            <span class="info-label">照片编号：</span>
            <span class="info-value">{{ openItemMessage?.inspectionTaskResultDetail?.pictureID || '无' }}</span>
          </div>
        </div>
      </el-card>

      <!-- 审核操作卡片 -->
      <el-card class="info-card" shadow="never">
        <div slot="header" class="card-header">
          <span class="header-title"><i class="el-icon-edit"></i> 审核操作</span>
        </div>
        <div class="form-content">
          <div class="form-item">
            <label class="form-label">结果校验：</label>
            <el-radio-group 
              v-model="openItemMessage.manualReview.resultCheck"
              size="medium"
            >
              <el-radio-button label="缺陷">缺陷</el-radio-button>
              <el-radio-button label="误报">误报</el-radio-button>
            </el-radio-group>
          </div>
          
          <div class="form-item">
            <label class="form-label">缺陷等级：</label>
            <el-select 
              v-model="openItemMessage.manualReview.defectLevel" 
              size="medium"
              style="width: 200px"
              placeholder="请选择"
            >
              <el-option 
                v-for="item in options" 
                :key="item.value" 
                :label="item.label" 
                :value="item.value"
              />
            </el-select>
          </div>
          
          <div class="form-item">
            <label class="form-label">审核备注：</label>
            <el-input
              v-model="textarea"
              type="textarea"
              :rows="3"
              placeholder="请输入审核备注..."
              resize="none"
              show-word-limit
              maxlength="200"
            />
          </div>
        </div>
      </el-card>
    </div>
  </div>

  <!-- 弹窗底部操作区 -->
  <div slot="footer" class="dialog-footer">
    <el-button @click="centerDialogVisible = false" size="medium">取消</el-button>
    <el-button 
      v-if="openItemMessage?.manualReview?.auditStatus != '已审核'  && hasPermission(authStore.permissions,1) " 
      type="primary" 
      size="medium"
      @click="submitMessage(openItemMessage)"
    >
      <i class="el-icon-check"></i> 提交审核
    </el-button>
  </div>
</el-dialog>
  </div>
</template>

<script lang="ts" setup>
// 原有的script部分保持不变，只添加了新的formatDate方法

import { ref ,onMounted,watch, nextTick , onBeforeUnmount} from 'vue';
import request from '@/utils/request';
import { useAuthStore } from '../../stores/user';
import { ElMessage } from 'element-plus';
import showMessage from '@/utils/showMessage';
import { hasPermission } from '@/utils/permissionUtils';
interface Rect {
  x1: number;
  y1: number;
  x2: number;
  y2: number;
  label?: string;
}

const canvasRef = ref<HTMLCanvasElement | null>(null);
  const tableData = ref([]); // 原始数据
  const displayedData = ref<any>([]); // 当前页显示的数据
  const currentPage = ref(1); // 当前页码
  const pageSize = ref(6); // 每页条数
  const total = ref(0); // 总条数
  const centerDialogVisible = ref(false)
  const textarea = ref('')
  const type = ref()
  const input = ref()
  const value2 = ref()
  const Prefecture = ref('阜阳市')  //地市
  const options = [
  {
    value: '一般',
    label: '一般',
  },
  {
    value: '严重',
    label: '严重',
  },
  {
    value: '危机',
    label: '危机',
  },
]

const Prefectures = [
      {
          value: '阜阳市',
          label: '阜阳市',
      },
  ]
  const city = ref()
  const citys = [
      {
          value: '颍州区',
          label: '颍州区',
      },
      {
          value: '颍东区',
          label: '颍东区',
      },
      {
          value: '颍泉区',
          label: '颍泉区',
      },
      {
          value: '临泉区',
          label: '临泉区',
      },
      {
          value: '太和县',
          label: '太和县',
      },
      {
          value: '阜南县',
          label: '阜南县',
      },
      {
          value: '颍上县',
          label: '颍上县',
      },
      {
          value: '界首市',
          label: '界首市',
      },
  ]
  const Audit = ref()
  const Audits = [
      {
          value: '待审核',
          label: '待审核',
      },
      {
          value: '已审核',
          label: '已审核',
      },
  ]
  const task = ref()
  const tasks = [
      {
          value: '缺陷1',
          label: '缺陷1',
      },
      {
          value: '缺陷2',
          label: '缺陷2',
      },
      {
          value: '缺陷3',
          label: '缺陷3',
      }
    ]  
  // Define state variables
  const items = ref([
  ]);
  


  const getAllAlarm = () => {
    request.get('/manager/getAllManualView').then((res=> {

      tableData.value = res.data
      total.value = res.data.length;
      updateDisplayedData();
    }))
  };

  // 更新显示的数据
const updateDisplayedData = () => {
  const start = (currentPage.value - 1) * pageSize.value;
  const end = start + pageSize.value;
  displayedData.value = tableData.value.slice(start, end);
};

  // 点击对应项，打开审核相关页面
  const openItemMessage = ref()
  const canvasMessageList = ref<any>([]);
  const canvasScale = ref<any>()
  const alarmTrouble = ref<any>()
  const showItem = (item:any) => {
    textarea.value = item.manualReview.checkDescription
    openItemMessage.value = item
    canvasMessageList.value = item.manualReview.defectInformation
    canvasScale.value = item.manualReview.canvasScale
    alarmTrouble.value = item.manualReview.defectContent
    centerDialogVisible.value = true
  }

  // 处理分页切换
const handleCurrentChange = (page: number) => {
  currentPage.value = page;
  updateDisplayedData();
};


  // 点击确认按钮

  const authStore = useAuthStore();//使用store仓库进行数据管理
  const submitMessage = (openItemMessage:any) => {
    if(!openItemMessage.manualReview?.id || !authStore.user?.name || !openItemMessage.manualReview.resultCheck || !openItemMessage.manualReview.defectLevel || !textarea.value){
      ElMessage.error('参数不全，无法上传')
      return
    }
    request.post('/inspection/auditResult',{
          id:Number(openItemMessage.manualReview?.id),//图片的信息
          auditPerson:authStore.user?.name,//人的名称
          resultCheck:openItemMessage.manualReview.resultCheck,//缺陷还是误报
          defectLevel:openItemMessage.manualReview.defectLevel,
          checkDescription:textarea.value,
        }).then((res)=> {
          showMessage(res)
          if(res.data.status == 'success'){
        
            getAllAlarm()
    }
          centerDialogVisible.value = false
  })
}

  // 获取杆塔类型
  const towerTypeList = ref()
        const getAllTowerType = () => {
          request.get('/resource/getAllTowerType').then((res)=> {
          towerTypeList.value  = res.data
          })
        }


        const filterUser = () => {
      request.post("/manager/getAllManualViewByCondition" ,{
        city: Prefecture.value || '',
        county: city.value || '',
        defectContent: task.value || '',
        towerTypeID: type.value || '',
        taskName: input.value || '',
        auditStatus: Audit.value || '',
        startTime: (value2.value?.[0]) ? formatDateOne(value2.value[0]) : '',
        endTime: (value2.value?.[1]) ? formatDateOne(value2.value[1]) : '',
      }).then(
      (res)=>{
        if(res.status == 200){          
          tableData.value = res.data
          total.value = res.data.length;
          updateDisplayedData();
            }
            }
          )
    }

    const formatDate = (dateString: string) => {
  if (!dateString) return '';
  const date = new Date(dateString);
  return date.toLocaleString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit'
  }).replace(/\//g, '-');
};

const getStatusClass = (status: string) => {
  switch(status) {
    case '已审核': return 'status-approved';
    case '待审核': return 'status-pending';
    default: return 'status-default';
  }
};

const getDefectLevelClass = (level: string) => {
  switch(level) {
    case '一般': return 'level-normal';
    case '严重': return 'level-serious';
    case '危机': return 'level-critical';
    default: return 'level-default';
  }
};

const getResultTagType = (result: string) => {
  return result === '缺陷' ? 'danger' : 'success';
};





    
// 格式化时间方法
const formatDateOne = (date:any) => {
  let d = new Date(date);
  let year = d.getFullYear();
  let month = String(d.getMonth() + 1).padStart(2, '0');
  let day = String(d.getDate()).padStart(2, '0');
  let hours = String(d.getHours()).padStart(2, '0');
  let minutes = String(d.getMinutes()).padStart(2, '0');
  let seconds = String(d.getSeconds()).padStart(2, '0');
  return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
};
//分页修改相关逻辑
const detectPageSize = () => {
  const width = window.innerWidth;
  if (width <= 768) {
    pageSize.value = 8;
  } else if (width <= 1800) {
    pageSize.value = 8;
  } else {
    pageSize.value = 21;
  }
  updateDisplayedData();
};



const drawBoxes = async () => {
  await nextTick();
  setTimeout(() => {
    try {
      doDrawBoxes();
    } catch (e) {
      console.error("绘制失败", e);
    }
  }, 200);
};

const doDrawBoxes = () => {
  const canvas = canvasRef.value;
  if (!canvas) return;

  const imgElement = canvas.closest(".image-container")?.querySelector("img") as HTMLImageElement;
  if (!imgElement || !imgElement.complete) {
    console.warn("图片未加载完成");
    return;
  }

  const { naturalWidth, naturalHeight } = imgElement;
  const { width, height } = imgElement.getBoundingClientRect();
  const scaleX = width / naturalWidth;
  const scaleY = height / naturalHeight;

  if (scaleX > scaleY) {
    canvas.width = naturalWidth * scaleY;
    canvas.height = height;
    canvas.style.left = (width - naturalWidth * scaleY) / 2 + "px";
    canvas.style.top = "0px";
  } else {
    canvas.width = width;
    canvas.height = naturalHeight * scaleX;
    canvas.style.top = (height - naturalHeight * scaleX) / 2 + "px";
    canvas.style.left = "0px";
  }

  const ctx = canvas.getContext("2d");
  if (!ctx) return;
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  // 多层 JSON 解析
  let parsedData: any[] = [];
  try {
    parsedData = JSON.parse(canvasMessageList.value);
  } catch (e) {
    console.warn("解析 defectInformation 失败", e);
    return;
  }

  const rectList: Rect[] = [];
  parsedData.forEach((entry) => {
    if (entry.code === "success" && entry.result?.flag === 1) {
      const messages = entry.result.message || [];
      messages.forEach((msg: any) => {
        if (msg.coordinate) {
          rectList.push({
            ...msg.coordinate,
            label: msg.description || "缺陷"
          });
        }
      });
    }
  });

  // 开始绘制
  const scale = scaleX > scaleY ? canvas.width / naturalWidth : canvas.height / naturalHeight;
  const ratio = canvasScale.value ? (1 / canvasScale.value) : 1;

  rectList.forEach(({ x1, y1, x2, y2, label }) => {
    const rectX = x1 * scale * ratio;
    const rectY = y1 * scale * ratio;
    const rectWidth = (x2 - x1) * scale * ratio;
    const rectHeight = (y2 - y1) * scale * ratio;

    // 绘制红框
    ctx.strokeStyle = "red";
    ctx.lineWidth = 2;
    ctx.strokeRect(rectX, rectY, rectWidth, rectHeight);

    // 绘制文字（缺陷类型）
    ctx.font = "14px Arial";
    ctx.fillStyle = "red";
    const textY = rectY - 6 < 12 ? rectY + 14 : rectY - 6; // 防止靠上文字被裁剪
    ctx.fillText(label || "缺陷", rectX + 2, textY);
  });
};



watch(() => openItemMessage, () => drawBoxes(), { deep: true });

  onMounted(()=>{
    detectPageSize();
    window.addEventListener('resize', detectPageSize);
    getAllAlarm()
    getAllTowerType()
  })

  onBeforeUnmount(() => {
  window.removeEventListener('resize', detectPageSize);
});
</script>

<style scoped>
.app-container {
  background-color: #e7e8e9;
  height: calc(100vh - 100px);
  display: flex;
  flex-direction: column;
}


/* 筛选区域样式 */
.filter-area {
  background: #ffffff;
  padding: 10px;
  padding-bottom: 10px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
  
  .filter-row {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 15px;
    
    &:last-child {
      margin-bottom: 0;
    }
  }
  
  .filter-item {
    flex: 1;
    min-width: 200px;
    
    &:deep(.el-input__inner) {
      height: 36px;
      line-height: 36px;
    }
  }
  
  .date-picker {
    flex: 2;
  }
  
  .search-btn {
    height: 36px;
    padding: 0 20px;
    margin-left: auto;
    
    i {
      margin-right: 5px;
    }
  }
}

/* 内容区域样式 */
.content-area {
  background: #ffffff;
  padding: 10px;
  padding-top: 10px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
  flex: 1; /* 关键代码：填满剩余空间 */
  display: flex;
  flex-direction: column;
}


/* 网格布局样式 */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 10px;
  margin-bottom: 10px;
}

.grid-item {
  transition: all 0.3s ease;
  
  &:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
  }
}

/* 卡片样式 */
.card {
  background: #ffffff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
  height: 100%;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  transition: all 0.3s ease;
  border: 1px solid #ebeef5;
  
  &:hover {
    border-color: #409eff;
  }
}

.card-header {
  padding: 12px 15px;
  border-bottom: 1px solid #f0f0f0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #fafafa;
  
  .task-name {
    font-weight: 500;
    color: #303133;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  
  .task-time {
    font-size: 12px;
    color: #909399;
    flex-shrink: 0;
    margin-left: 10px;
  }
}

.card-image {
  position: relative;
  height: 180px;
  overflow: hidden;
  
  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s;
  }
  
  &:hover img {
    transform: scale(1.05);
  }
}

.status-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: bold;
  color: white;
  z-index: 2;
  
  &.status-approved {
    background: #67c23a;
  }
  
  &.status-pending {
    background: #e6a23c;
  }
  
  &.status-default {
    background: #909399;
  }
}

.card-details {
  padding: 15px;
  flex-grow: 1;
  
  .detail-item {
    margin-bottom: 8px;
    font-size: 13px;
    display: flex;
    
    &:last-child {
      margin-bottom: 0;
    }
    
    .detail-label {
      color: #909399;
      min-width: 70px;
    }
    
    .level-normal {
      color: #67c23a;
    }
    
    .level-serious {
      color: #e6a23c;
    }
    
    .level-critical {
      color: #f56c6c;
    }
    
    .level-default {
      color: #909399;
    }
  }
}

/* 分页样式 */
.pagination {
  margin-top: auto;
  display: flex;
  justify-content: center;
}


/* 详情弹窗样式 */
/* 弹窗整体样式 */
.detail-dialog {
  border-radius: 12px;
  overflow: hidden;
  
  .el-dialog__header {
    display: none; /* 隐藏默认头部 */
  }
  
  .el-dialog__body {
    padding: 0;
    height: 75vh;
    display: flex;
    flex-direction: column;
  }
}

/* 头部样式 */
.dialog-header {
  padding: 16px 24px;
  background: #f5f7fa;
  border-bottom: 1px solid #e8e8e8;
  display: flex;
  justify-content: space-between;
  align-items: center;
  
  .header-left {
    .task-title {
      margin: 0;
      font-size: 18px;
      font-weight: 500;
      color: #303133;
      line-height: 1.5;
    }
    
    .task-meta {
      margin-top: 8px;
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      
      .meta-item {
        font-size: 13px;
        color: #909399;
        margin-right: 20px;
        display: inline-flex;
        align-items: center;
        
        i {
          margin-right: 5px;
          font-size: 14px;
        }
      }
    }
  }
  
  .header-right {
    display: flex;
    align-items: center;
    
    .el-tag {
      margin-left: 10px;
      font-size: 14px;
      height: 28px;
      line-height: 26px;
    }
    
    .status-tag {
      min-width: 60px;
      text-align: center;
    }
  }
}

/* 主体内容样式 */
.dialog-body {
  flex: 1;
  display: flex;
  overflow: hidden;
  padding: 0;
}

/* 图片区域样式 */
.image-section {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  border-right: 1px solid #e8e8e8;
  padding: 20px;
  
  .image-container {
    flex: 1;
    position: relative;
    background-color: #f9f9f9;
    border-radius: 4px;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    
    .main-image {
      max-width: 100%;
      max-height: 100%;
      object-fit: contain;
    }
    
    .bounding-box-canvas {
      position: absolute;
      top: 0;
      left: 0;
      pointer-events: none;
    }
    
    .image-error {
      display: flex;
      flex-direction: column;
      align-items: center;
      color: #c0c4cc;
      
      i {
        font-size: 40px;
        margin-bottom: 10px;
      }
    }
  }
  
  .image-toolbar {
    margin-top: 15px;
    display: flex;
    justify-content: center;
    gap: 10px;
    
    .el-button {
      padding: 8px 15px;
    }
  }
}

/* 信息区域样式 */
.info-section {
  width: 380px;
  padding: 20px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 20px;
  
  .info-card {
    border: none;
    
    .card-header {
      border-bottom: none;
      padding: 0 0 12px 0;
      
      .header-title {
        font-size: 16px;
        font-weight: 500;
        color: #409eff;
        
        i {
          margin-right: 8px;
        }
      }
    }
    
    .info-content {
      .info-row {
        margin-bottom: 15px;
        display: flex;
        
        &:last-child {
          margin-bottom: 0;
        }
        
        .info-label {
          width: 90px;
          color: #909399;
          font-size: 14px;
        }
        
        .info-value {
          flex: 1;
          color: #606266;
          word-break: break-word;
          
        }
      }
    }
    
    .form-content {
      .form-item {
        margin-bottom: 20px;
        
        &:last-child {
          margin-bottom: 0;
        }
        
        .form-label {
          display: block;
          margin-bottom: 8px;
          color: #606266;
          font-size: 14px;
        }
        
        .el-radio-group {
          width: 100%;
          
          .el-radio-button {
            flex: 1;
            
            &:first-child .el-radio-button__inner {
              border-left: 1px solid #dcdfe6;
            }
          }
        }
      }
    }
  }
}

/* 底部操作区样式 */
.dialog-footer {
  padding: 15px 24px;
  border-top: 1px solid #e8e8e8;
  display: flex;
  justify-content: flex-end;
  
  .el-button {
    min-width: 100px;
    margin-left: 12px;
  }
}

/* 响应式调整 */
@media (max-width: 1200px) {
  .detail-dialog {
    width: 95% !important;
    
    .dialog-body {
      flex-direction: column;
      height: auto;
      max-height: 80vh;
      
      .image-section {
        border-right: none;
        border-bottom: 1px solid #e8e8e8;
        padding: 15px;
        
        .image-container {
          min-height: 300px;
        }
      }
      
      .info-section {
        width: 100%;
        padding: 15px;
      }
    }
  }
}

@media (max-width: 768px) {
  .dialog-header {
    flex-direction: column;
    align-items: flex-start;
    
    .header-right {
      margin-top: 10px;
    }
  }
  
  .info-section {
    .info-card {
      .info-content {
        .info-row {
          flex-direction: column;
          
          .info-label {
            width: auto;
            margin-bottom: 5px;
          }
        }
      }
    }
  }
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .detail-dialog {
    width: 90% !important;
    
    .dialog-body {
      flex-direction: column;
      height: auto;
      
      .image-section {
        margin-right: 0;
        margin-bottom: 20px;
        height: 400px;
      }
      
      .info-section {
        width: 100%;
      }
    }
  }
}

@media (max-width: 768px) {
  .filter-row {
    flex-wrap: wrap;
    
    .filter-item {
      min-width: 100% !important;
    }
  }
  
  .grid {
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  }
  
  .detail-dialog {
    width: 95% !important;
    top: 2vh !important;
    
    .dialog-body {
      padding: 15px;
      
      .image-section {
        height: 300px;
      }
    }
  }
}

.highlight-green {
  color: green;
}
.highlight-red {
  color: red;
}
</style>